<!--
 * @Author: ZhaoChenGuang
 * @Date: 2025-01-16 15:55:01
 * @Description: 
-->
<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page, useVbenDrawer } from '@vben/common-ui';

import { Button } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { API_URL_COMPANY_LIST, req } from '#/api/index';

import Info from './components/Info.vue';

const [InfoDrawer, InfoDrawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: Info,
  // placement: 'left',
});

interface RowType {
  id: Number;
  name: string;
  createAt: string;
  updateAt: string;
}

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { field: 'name', title: '井队名称' },
    { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' },
    { field: 'updatedAt', formatter: 'formatDateTime', title: '更新时间' },
    {
      field: 'action',
      slots: { default: 'action' },
      title: '操作',
      fixed: 'right',
      width: 100,
    },
  ],
  exportConfig: {},
  height: 'auto',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        return await req.list(API_URL_COMPANY_LIST, {
          currentPage: page.currentPage,
          pageSize: page.pageSize,
        });
      },
    },
  },

  toolbarConfig: {
    custom: true,
    export: true,
    refresh: { code: 'query' },
    zoom: true,
  },
};

function openInfoDrawer(placement: any, row?: any) {
  if (row && row.id) {
    InfoDrawerApi.setState({ placement, title: '编辑井队' })
      .setData({ values: { name: row.name, id: row.id } })
      .open();
    return;
  }
  InfoDrawerApi.setState({ placement, title: '新增井队' })
    .setData({ values: {} })
    .open();
}

const [Grid, tableApi] = useVbenVxeGrid({
  gridOptions,
});
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="井队列表" table-title-help="提示">
      <template #toolbar-tools>
        <Button class="mr-2" type="primary" @click="openInfoDrawer('right')">
          新增井队
        </Button>
      </template>
      <template #action="{ row }">
        <Button type="link" @click="openInfoDrawer('right', row)">编辑</Button>
      </template>
    </Grid>

    <InfoDrawer :callback-func="tableApi.reload" />
  </Page>
</template>
